<template>
  <div class="management">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-input v-model="input" placeholder="角色名称"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" plain @click="btn">搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" plain @click="clearbtn">重置</el-button>
      </el-col>
      <el-col :span="2" :offset="14">
        <el-button type="primary" plain @click="changjian">创建角色</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="角色ID" width="180"> </el-table-column>
      <el-table-column prop="role_name" label="角色名称" width="180">
      </el-table-column>
      <el-table-column prop="identify" label="角色标识"> </el-table-column>
      <el-table-column prop="description" label="角色描述"> </el-table-column>
      <el-table-column prop="created_at" label="添加时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="getRoleuserinfo(row.id)"
          ></el-button>
          <el-button
            type="danger"
            @click="getRoleDelete(row.id)"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="4" :offset="17">
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[10, 15, 20, 25]"
          :page-size="page.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 弹窗 -->
    <el-dialog title="添加角色" :visible="showDialog" @close="btnCancel">
      <el-form
        ref="roleForm"
        :model="roleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="roleForm.role_name" />
        </el-form-item>
        <el-form-item label="角色标识" prop="identify">
          <el-input v-model="roleForm.identify" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input type="textarea" v-model="roleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
             :default-checked-keys="checkedCities"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 弹窗 -->
  </div>
</template>

<script>
import {
  getRole,
  getTree,
  getRoleuser,
  getRoleuserinfo,
  getRoleDelete,
} from "@/api/permission";
export default {
  name: "management",
  components: {},
  props: {},
  data() {
    return {
      checkedCities:[],
      authlist: [],
      showDialog: false,
      input: "",
      tableData: [],
      roleForm: {
        role_name: "",
        identify: "",
        description: "",
      },
      page: {
        role_name: "",
        page: 1,
        limit: 10,
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "permission_name",
      },
      rules: {
        role_name: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        identify: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        description: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getRole();
  },
  mounted() {},
  methods: {
    // 添加角色

    async btnOK() {
      try {
        this.authlist = this.$refs.tree.getCheckedKeys();
        const data = {
          authlist: this.authlist,
          description: this.roleForm.description,
          identify: this.roleForm.identify,
          role_name: this.roleForm.role_name,
        };
        await getRoleuser(data);
        this.showDialog = false;
        this.$message.success("添加成功");
      } catch (error) {
        this.$message.error("添加失败");
      }
    },
    btnCancel() {
      this.showDialog = false;
      this.getRole();
    },
    // 获取角色
    async getRole() {
      const data = {
        page: this.page.page,
        limit: this.limit,
      };
      const { total, list } = await getRole(data);
      // console.log(total);
      // console.log(data.list);
      // console.log});
      this.tableData = list;
      // const { row } = this.tableData;
    },
    //搜索功能
    async btn() {
      this.page.role_name = this.input;

      const data = await getRole(this.page);
      this.tableData = data.list;
      // console.log(data);
    },
    // 创建角色
    async changjian() {
      this.showDialog = true;
      this.checkedCities=[]
      this.roleForm = {
        role_name: "",
        identify: "",
        description: "",
      };
      const data = await getTree();
      this.checkedCities=[]
      // console.log(data);
      this.data = data;
    },
    clearbtn() {
      this.input = "";
      this.btn();
    },
    async handleSizeChange(val) {
      const data = {
        page: this.page.page,
        limit: val,
      };
      const { total, list } = await getRole(data);

      this.tableData = list;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 修改角色
    async getRoleuserinfo(id) {
      this.showDialog = true;
      const str = await getTree();
      console.log(111);
      console.log(str);
      console.log(222);
      this.data = str;
      this.checkedCities = [];
      const data = await getRoleuserinfo(id);
      this.showDialog = true;
      this.roleForm.role_name = data.role_name;
      this.roleForm.identify = data.identify;
      this.roleForm.description = data.description;
      data.authlist.forEach((item) => {
        this.checkedCities.push(item.id);
      });
      console.log(this.checkedCities);
      const strto = await getTree();

      this.data = strto;

      // console.log(data);
    },
    // 删除
    getRoleDelete(id) {
      this.$confirm("此操作将永久删除该管理员, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await getRoleDelete(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style scoped>
.management {
  padding: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
/* .bg-purple-dark {
   background: #99a9bf; 
}  */
/* .bg-purple {
  background: #d3dce6;
} */
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
